@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
 u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  height: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

table {
  border-collapse: collapse;
}
ul, ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: #657ada;
}
i {
  font-style: italic;
}
sup {
  font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.1em;
}
sub {
  font-size: 75.5%;
vertical-align: bottom;
position: relative;
top: -0.1em;
}
em{
  font-style: italic;
}
body {
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
  font-size: 14px;
  color: #333;
  background: #f2f2f2;
  min-height: 100%;
  position: relative;
}
 p {
  line-height: 1.5em;
 }
.right {
  float: right;
  margin: 0 0 1em 2em;
  width: 40%;
  height: 40%;

}
.bl {
  text-align: left;
  display: block;
  text-indent: -999em;
  overflow: hidden;
  border: none;
  height: 45px;
}
.bl1 {
  text-align: left;
  display: block;
  text-indent: -999em;
  overflow: hidden;
  border: none;
  height: 60px;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
.wrapper {
  width: 100%;
  margin-top: 0 auto;
  min-height: 100%;
}
.contact {
  width: 25%;
  height: 25%;
}

/* main */

/* header */
header {
  margin-bottom: 30px;
  width:100%;
  text-align: center;
   }
header h2, header h1 {
  font-size: 30px;
  width: 100%;
  margin: 0 auto;
  }
header h1 {
	padding-bottom:10px;
	padding-top: 15px;
}

header h2 {
	padding-bottom:15px;
	font-weight: bold;
}
@media screen and (max-width: 425px) {
	header h2, header h1 {
		font-size: 20px;
	}
}
@media screen and (max-width: 330px) {
	header h2, header h1 {
		font-size: 18px;
	}
}
header h2 a, header h1 {
  color: #273882;
}

/* Add a black background color to the top navigation */
.topnav {
    background: #273882;   
    overflow: hidden;
	padding: 30;
}
.inner-div
{
     margin: 0 auto;
     max-width: 1023px; 
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
	padding-left: 30px;
    text-decoration: none;
    font-size: 16px;
}
.topnav a strong {
	font-size: 100%;
	display: block;
	font-weight: bold;
}
.topnav a span {
	font-size: 60%;
	display: block;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 995px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 995px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/* main */
main {
  display: block;
  min-height: 90%;
}

/* article */
article {
	padding-left: 20px;
	padding-right: 20px;
}

@media screen and (min-width: 1000px) {
	article {
		width: 1000px;
	margin: 0 auto;
	}
}

article section {
  border: 1px solid #ccc;
  border-radius: 5px; 
  padding-bottom: 20px; 
  background: #fefefe;
  box-shadow: 0 0 15px #ddd;
  
}
.top article section{
  float: left;
  width: 70%;
  margin-bottom: 30px;
}
.top article section.history {
  width: 25%;
  float: right;
}

@media screen and (max-width: 800px) {
	.top article section.history, .top article section {
		width: 100%;
	}
}
article section h2 {
  background: #eee;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #273882;
}
article section h3 {
  margin: 0 20px 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-left: 8px solid #788ff3;
  border-bottom: 1px solid #788ff3;
  line-height: 30px;
  padding-left: 5px;
}
article section h3 a {
  text-decoration: none;
  color: #333;
}

article section h4 {
  margin: 0 20px 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #273882;
}

article section h5 {
  margin: 0 20px 5px 20px;
  font-weight: bold;
  }
article section p {
  margin: 0 20px 20px 20px;
}
p.list {margin-bottom: 5px;}
article section ul{
	display: block;
    list-style-type: disc;
	margin: 0 20px 20px 20px;
	padding-left: 20px;
}
article section ul.inline-list{
	padding-top: 1px;
}
article section li.str {
  position: relative;
  list-style: none;
}
article section li.str:before {
  content: "＊";
  font-weight: bold;
  position: absolute;
  left: -20px;
  }
article span.small {
  font-size: 12px;
}
article section a {
  text-decoration: underline;
}
article section dl.schedule {
  padding: 0 20px;
}
article section dl.schedule dt {
  color: #273882;
  font-weight: bold;
  padding-bottom: 5px;
  padding-top: 10px;
}
article section dl.schedule dt:first-child {
  padding-top: 0;
}
article section dl.schedule dd {
  padding: 0 0 10px 1em;
  border-bottom: 1px dashed #ccc;
}
article section table {
  width: 860px;
  margin: 0 20px;
}
article section table.timetable {
  width: 400px;
  margin: 0 auto 40px auto;
}
article section table tr th,
article section table tr td {
  padding: 8px 10px;
}
article section table th {
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid #eee;

}
article section table.title th:first-child{
  width: 15%;
}
article section table.title th:nth-child(2) {
  width: 15%;
}
article section table.timetable{
  width: auto;
}

article section table.timetable tr td{
  padding-left: 12pt;
  padding-right: 12pt;
}

article section table.timetable tr th:first-child,
article section table.timetable tr td:first-child {
  text-align: center;
}
article section table tr:nth-child(2n+1) {
  background: #f7f7f7;
}
article section table tr:hover {
  background: #eee;
}
article section table tr:first-child {
  background: #fff;
}
article section table.timetable tr.break {
	background: #788ff35e;
	height:2px;
	border: 0;
	padding: 0;
}

article section table.timetable tr.break td{
	border: 0px;
	font-size:80%;
	padding: 0px;
}

.footer {
  clear: both;
  right: 0;
  bottom: 0;
  left: 0;
  width:100%;
  margin-top: 50px;
  background: #273882;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

a {
	word-wrap: break-word;
}
